<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Password Recovery - CarbonTrack</title>
  <link rel="icon" href="/img/team.jpg" type="image/JPG">
  
  <!-- CDN References -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
  
  <!-- SF Pro font -->
  <link href="https://fonts.cdnfonts.com/css/sf-pro-display" rel="stylesheet">
  
  <!-- Cloudflare Turnstile -->
  <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
  
  <!-- Custom CSS -->
  <link rel="stylesheet" href="./css/ios-design.css">
  <link rel="stylesheet" href="./css/index.css">
  
  <!-- JavaScript libraries -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
  <script src="js/utils.js"></script>
  <script src="js/nav.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/intersection-observer@0.12.2/intersection-observer.js"></script>
  
  <style>
    :root {
      --card-bg-light: rgba(255, 255, 255, 0.8);
      --card-bg-dark: rgba(44, 44, 46, 0.8);
      --text-color-light: #000;
      --text-color-dark: #FFFFFF;
      --recovery-gradient-start: var(--ios-purple);
      --recovery-gradient-end: var(--ios-pink);
      --animation-timing-apple: cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    
    body {
      background-color: var(--ios-secondary-system-background, #F2F2F7);
      color: var(--text-color-light);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      position: relative;
      min-height: 100vh;
      transition: background-color 0.3s ease, color 0.3s ease;
    }
    
    /* Frosted glass background effect */
    .frosted-glass {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: -2;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      background: rgba(255, 255, 255, 0.05);
    }
    
    /* Add ambient glow effects */
    .glow-effect {
      position: fixed;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      filter: blur(50px);
      z-index: -1;
      opacity: 0.5;
      animation: pulse 8s infinite alternate cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    
    .glow-purple {
      top: 10%;
      right: 10%;
      background: radial-gradient(circle, rgba(175, 82, 222, 0.2), transparent 70%);
    }
    
    .glow-pink {
      bottom: 10%;
      left: 5%;
      background: radial-gradient(circle, rgba(255, 45, 85, 0.15), transparent 70%);
      animation-delay: 2s;
    }
    
    @keyframes pulse {
      0% { transform: scale(1) translate(0, 0); opacity: 0.5; }
      50% { transform: scale(1.05) translate(20px, -10px); opacity: 0.7; }
      100% { transform: scale(1) translate(0, 0); opacity: 0.5; }
    }
    
    .recovery-header {
      background: linear-gradient(135deg, var(--recovery-gradient-start), var(--recovery-gradient-end));
      color: white;
      padding: 120px 0 60px;
      text-align: center;
      border-radius: 0 0 24px 24px;
      margin-bottom: 40px;
      position: relative;
      overflow: hidden;
    }
    
    /* Add shimmer effect */
    .recovery-header::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
      transform: rotate(30deg);
      animation: shimmer 10s infinite linear;
      pointer-events: none;
    }
    
    @keyframes shimmer {
      0% { transform: translateX(-50%) rotate(0deg); }
      100% { transform: translateX(0%) rotate(360deg); }
    }
    
    .recovery-header h1 {
      font-weight: 700;
      margin-bottom: 16px;
      position: relative;
      z-index: 2;
    }
    
    .recovery-header p {
      opacity: 0.9;
      max-width: 600px;
      margin: 0 auto;
      font-size: 1.1rem;
      position: relative;
      z-index: 2;
    }
    
    .recovery-form {
      background-color: var(--card-bg-light);
      border-radius: 24px;
      padding: 32px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
      margin-bottom: 40px;
      max-width: 550px;
      margin-left: auto;
      margin-right: auto;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      transition: transform 0.3s var(--animation-timing-apple),
                box-shadow 0.3s var(--animation-timing-apple);
    }
    
    .recovery-form:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    }
    
    .recovery-steps {
      display: flex;
      justify-content: center;
      margin-bottom: 30px;
    }
    
    .step {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 20px;
      position: relative;
    }
    
    .step:not(:last-child)::after {
      content: '';
      position: absolute;
      top: 14px;
      right: -15px;
      width: 30px;
      height: 2px;
      background: var(--ios-gray5);
    }
    
    .step.active:not(:last-child)::after {
      background: linear-gradient(to right, var(--ios-purple), var(--ios-pink));
    }
    
    .step-number {
      width: 30px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      margin-bottom: 8px;
      font-weight: 600;
      background: var(--ios-gray5);
      color: var(--ios-gray);
      transition: all 0.3s var(--animation-timing-apple);
    }
    
    .step.active .step-number {
      background: linear-gradient(135deg, var(--ios-purple), var(--ios-pink));
      color: white;
      box-shadow: 0 4px 10px rgba(175, 82, 222, 0.3);
      animation: pulse-step 1.5s infinite alternate cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    
    @keyframes pulse-step {
      0% { transform: scale(1); box-shadow: 0 4px 10px rgba(175, 82, 222, 0.3); }
      100% { transform: scale(1.05); box-shadow: 0 6px 14px rgba(175, 82, 222, 0.5); }
    }
    
    .step-label {
      font-size: 0.8rem;
      font-weight: 500;
      color: var(--ios-gray);
      transition: color 0.3s var(--animation-timing-apple);
    }
    
    .step.active .step-label {
      color: var(--ios-purple);
      font-weight: 600;
    }
    
    .form-group label {
      font-weight: 500;
      color: var(--ios-label);
      margin-bottom: 8px;
      font-size: 0.9rem;
    }
    
    .form-control {
      border-radius: 12px;
      padding: 12px 15px;
      border: 1px solid var(--ios-gray5);
      transition: all 0.3s var(--animation-timing-apple);
    }
    
    .form-control:focus {
      border-color: var(--ios-purple);
      box-shadow: 0 0 0 3px rgba(175, 82, 222, 0.15);
    }
    
    .btn-primary {
      background: linear-gradient(135deg, var(--ios-purple), var(--ios-pink));
      border: none;
      border-radius: 12px;
      padding: 12px 24px;
      font-weight: 600;
      transition: all 0.3s var(--animation-timing-apple);
      box-shadow: 0 4px 12px rgba(175, 82, 222, 0.2);
    }
    
    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(175, 82, 222, 0.3);
      background: linear-gradient(135deg, var(--ios-purple), var(--ios-pink));
    }
    
    .btn-primary:active {
      transform: translateY(1px);
      box-shadow: 0 2px 8px rgba(175, 82, 222, 0.3);
    }
    
    .verification-code {
      display: flex;
      justify-content: space-between;
      margin: 20px auto;
      max-width: 380px;
    }
    
    .verification-code .form-control {
      width: 56px;
      height: 68px;
      margin: 0 5px;
      text-align: center;
      font-size: 1.75rem;
      font-weight: 600;
      border-radius: 16px;
      padding: 0;
      background-color: var(--ios-secondary-system-background, #F2F2F7);
      border: 1px solid rgba(0, 0, 0, 0.1);
      box-shadow: none;
      transition: all 0.2s var(--animation-timing-apple);
      outline: none;
      caret-color: var(--ios-purple);
    }
    
    .verification-code .form-control:focus {
      border-color: var(--ios-purple);
      box-shadow: 0 0 0 2px rgba(175, 82, 222, 0.2);
      transform: scale(1.05);
    }
    
    /* Highlight the currently active digit input with purple border */
    .verification-code .form-control:focus {
      border: 2px solid var(--ios-purple);
      background-color: white;
    }
    
    body.dark-theme .verification-code .form-control {
      background-color: #2C2C2E;
      border-color: rgba(255, 255, 255, 0.1);
      color: #FFFFFF;
    }
    
    body.dark-theme .verification-code .form-control:focus {
      background-color: #3A3A3C;
      border-color: #BF5AF2;
    }
    
    .form-step {
      display: none;
    }
    
    .form-step.active {
      display: block;
      animation: fadeIn 0.5s var(--animation-timing-apple);
    }
    
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .recovery-info {
      text-align: center;
      color: var(--ios-gray);
      font-size: 0.9rem;
      margin-top: -20px;
      margin-bottom: 30px;
    }
    
    .recovery-info a {
      color: var(--ios-purple);
      text-decoration: none;
      font-weight: 500;
    }
    
    .recovery-info a:hover {
      text-decoration: underline;
    }
    
    /* Theme toggle button */
    .theme-toggle {
      position: fixed;
      right: 20px;
      bottom: 20px;
      width: 50px;
      height: 50px;
      border-radius: 25px;
      background: var(--ios-system-background);
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      cursor: pointer;
      z-index: 100;
      transition: all 0.3s var(--animation-timing-apple);
    }
    
    .theme-toggle:hover {
      transform: scale(1.05);
    }
    
    .theme-toggle i {
      font-size: 24px;
      color: var(--ios-gray);
    }
    
    /* Animation classes */
    .fade-in-up {
      animation: fadeInUp 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
      opacity: 0;
    }
    
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    .delay-1 { animation-delay: 0.1s; }
    .delay-2 { animation-delay: 0.2s; }
    .delay-3 { animation-delay: 0.3s; }
    .delay-4 { animation-delay: 0.4s; }
    .delay-5 { animation-delay: 0.5s; }
    
    /* Dark mode adaptations */
    @media (prefers-color-scheme: dark) {
      body.auto-theme {
        background-color: #1C1C1E;
        color: var(--text-color-dark);
      }
      
      body.auto-theme .recovery-form {
        background-color: var(--card-bg-dark);
      }
      
      body.auto-theme .step-number {
        background: #3A3A3C;
        color: rgba(255, 255, 255, 0.7);
      }
      
      body.auto-theme .step-label {
        color: rgba(255, 255, 255, 0.6);
      }
      
      body.auto-theme .step.active .step-label {
        color: #BF5AF2;
      }
      
      body.auto-theme .step:not(:last-child)::after {
        background: #3A3A3C;
      }
      
      body.auto-theme .form-control {
        background-color: #2C2C2E;
        border-color: rgba(255, 255, 255, 0.1);
        color: #FFFFFF;
      }
      
      body.auto-theme .form-control:focus {
        background-color: #3A3A3C;
        border-color: #BF5AF2;
        color: #FFFFFF;
      }
      
      body.auto-theme label {
        color: rgba(255, 255, 255, 0.8);
      }
      
      body.auto-theme .theme-toggle {
        background-color: rgba(44, 44, 46, 0.8);
      }
      
      body.auto-theme .theme-toggle i {
        color: #AEAEB2;
      }
      
      body.auto-theme .recovery-info {
        color: rgba(255, 255, 255, 0.6);
      }
      
      body.auto-theme .recovery-info a {
        color: #BF5AF2;
      }
    }
    
    /* Manual theme classes */
    body.dark-theme {
      background-color: #1C1C1E;
      color: var(--text-color-dark);
    }
    
    body.dark-theme .recovery-form {
      background-color: var(--card-bg-dark);
    }
    
    body.dark-theme .step-number {
      background: #3A3A3C;
      color: rgba(255, 255, 255, 0.7);
    }
    
    body.dark-theme .step-label {
      color: rgba(255, 255, 255, 0.6);
    }
    
    body.dark-theme .step.active .step-label {
      color: #BF5AF2;
    }
    
    body.dark-theme .step:not(:last-child)::after {
      background: #3A3A3C;
    }
    
    body.dark-theme .form-control {
      background-color: #2C2C2E;
      border-color: rgba(255, 255, 255, 0.1);
      color: #FFFFFF;
    }
    
    body.dark-theme .form-control:focus {
      background-color: #3A3A3C;
      border-color: #BF5AF2;
      color: #FFFFFF;
    }
    
    body.dark-theme label {
      color: rgba(255, 255, 255, 0.8);
    }
    
    body.dark-theme .theme-toggle {
      background-color: rgba(44, 44, 46, 0.8);
    }
    
    body.dark-theme .theme-toggle i {
      color: #AEAEB2;
    }
    
    body.dark-theme .recovery-info {
      color: rgba(255, 255, 255, 0.6);
    }
    
    body.dark-theme .recovery-info a {
      color: #BF5AF2;
    }
    
    body.light-theme {
      background-color: #F2F2F7;
      color: var(--text-color-light);
    }
    
    .btn-link {
      color: var(--ios-blue);
      font-weight: 500;
      text-decoration: none;
      padding: 12px 24px;
      transition: all 0.3s var(--animation-timing-apple);
    }
    
    .btn-link:hover {
      text-decoration: none;
      opacity: 0.8;
    }
    
    /* Button styles for back and verify code */
    .btn-verify {
      padding: 12px 32px;
      font-size: 1.1rem;
      border-radius: 16px;
    }
    
    #backToStep1, #backToStep2 {
      color: var(--ios-blue);
      transition: all 0.2s var(--animation-timing-apple);
    }
    
    #backToStep1:hover, #backToStep2:hover {
      color: var(--ios-blue-dark, #0066CC);
    }
    
    body.dark-theme #backToStep1, 
    body.dark-theme #backToStep2 {
      color: #0A84FF;
    }
  </style>
</head>
<body class="auto-theme">
<!-- Add frosted glass background -->
<div class="frosted-glass"></div>

<!-- Add ambient glow effects -->
<div class="glow-effect glow-purple"></div>
<div class="glow-effect glow-pink"></div>

<!-- 导航栏容器，将由JavaScript加载 -->
<div id="navbar-container"></div>

<header class="recovery-header">
  <div class="container">
    <h1 class="fade-in-up">Password Recovery</h1>
    <p class="fade-in-up delay-1">Follow the steps below to reset your password and regain access to your account.</p>
  </div>
</header>

<div class="container">
  <div class="recovery-steps fade-in-up delay-2">
    <div class="step active" id="step1">
      <div class="step-number">1</div>
      <div class="step-label">Verify Email</div>
    </div>
    <div class="step" id="step2">
      <div class="step-number">2</div>
      <div class="step-label">Reset Password</div>
    </div>
  </div>
  
  <div class="recovery-form ios-depth-effect fade-in-up delay-3">
    <!-- Step 1: Enter Email Address -->
    <div class="form-step active" id="step1-content">
      <h3 class="mb-4">Verify Your Email</h3>
      <div class="form-group">
        <label for="email">Email Address</label>
        <input type="email" class="form-control" id="email" placeholder="Enter your registered email">
      </div>
      <div class="cf-turnstile" id="turnstile-step1" data-sitekey="0x4AAAAAAA0wcgSIUML5Ocs3"></div>
      <div class="text-right mt-4">
        <button type="button" class="btn btn-primary" id="nextToStep2">Send Verification Code</button>
      </div>
    </div>
    
    <!-- Step 2: Enter Verification Code and Reset Password (Combined) -->
    <div class="form-step" id="step2-content">
      <h3 class="mb-4">Reset Your Password</h3>
      <p class="mb-4">We've sent a 6-digit verification code to your email. Please enter it below along with your new password.</p>
      
      <div class="form-group">
        <label>Verification Code</label>
        <div class="verification-code">
          <input type="text" class="form-control digit" id="digit1" maxlength="1" inputmode="numeric" pattern="[0-9]*" autofocus>
          <input type="text" class="form-control digit" id="digit2" maxlength="1" inputmode="numeric" pattern="[0-9]*">
          <input type="text" class="form-control digit" id="digit3" maxlength="1" inputmode="numeric" pattern="[0-9]*">
          <input type="text" class="form-control digit" id="digit4" maxlength="1" inputmode="numeric" pattern="[0-9]*">
          <input type="text" class="form-control digit" id="digit5" maxlength="1" inputmode="numeric" pattern="[0-9]*">
          <input type="text" class="form-control digit" id="digit6" maxlength="1" inputmode="numeric" pattern="[0-9]*">
        </div>
      </div>
      
      <div class="form-group mt-4">
        <label for="newPassword">New Password</label>
        <input type="password" class="form-control" id="newPassword" placeholder="Enter new password">
      </div>
      <div class="form-group">
        <label for="confirmPassword">Confirm Password</label>
        <input type="password" class="form-control" id="confirmPassword" placeholder="Confirm new password">
      </div>
      
      <div class="cf-turnstile" id="turnstile-step2" data-sitekey="0x4AAAAAAA0wcgSIUML5Ocs3"></div>
      <div class="d-flex justify-content-between mt-4">
        <button type="button" class="btn btn-link" id="backToStep1">Back</button>
        <button type="button" class="btn btn-primary btn-verify" id="resetPassword">Reset Password</button>
      </div>
    </div>
  </div>
  
  <div class="recovery-info fade-in-up delay-4">
    <p>Remember your password? <a href="index.html">Log in</a></p>
  </div>
</div>

<!-- Theme toggle button -->
<div class="theme-toggle" id="themeToggle">
  <i class="fas fa-moon"></i>
</div>

<!-- 页脚 -->
<div id="footer-placeholder"></div>

<script>
  // Theme toggling functionality
  document.addEventListener('DOMContentLoaded', function() {
    const themeToggle = document.getElementById('themeToggle');
    const body = document.body;
    const icon = themeToggle.querySelector('i');
    
    // Turnstile widget IDs and tokens
    let turnstileWidgets = {
      step1: null,
      step2: null
    };
    
    // Function to reset Turnstile widget
    function resetTurnstile() {
      if (window.turnstile) {
        turnstile.reset();
      }
    }

    // Function to safely get Turnstile token
    function getTurnstileToken(stepId) {
      const tokenElement = document.querySelector(`#turnstile-${stepId} [name="cf-turnstile-response"]`);
      if (tokenElement) {
        return tokenElement.value;
      }
      return null;
    }
    
    // Function to render Turnstile widgets
    function renderTurnstile(step) {
      // Wait for Turnstile to be available
      if (window.turnstile) {
        // Reset existing widgets if any
        turnstile.reset();
        
        // Only render the widget for the current step
        const widgetId = `turnstile-step${step}`;
        const container = document.getElementById(widgetId);
        
        if (container) {
          // Clear any existing content
          container.innerHTML = '';
          
          // Render new widget
          turnstileWidgets[`step${step}`] = turnstile.render(`#${widgetId}`, {
            sitekey: '0x4AAAAAAA0wcgSIUML5Ocs3',
            theme: (body.classList.contains('dark-theme') || 
                   (body.classList.contains('auto-theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) 
                  ? 'dark' : 'light'
          });
        }
      }
    }
    
    // Check if user has a saved preference
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      body.className = savedTheme;
      updateIcon(savedTheme);
    }
    
    themeToggle.addEventListener('click', () => {
      if (body.classList.contains('auto-theme')) {
        body.classList.remove('auto-theme');
        body.classList.add('dark-theme');
        localStorage.setItem('theme', 'dark-theme');
      } else if (body.classList.contains('dark-theme')) {
        body.classList.remove('dark-theme');
        body.classList.add('light-theme');
        localStorage.setItem('theme', 'light-theme');
      } else {
        body.classList.remove('light-theme');
        body.classList.add('auto-theme');
        localStorage.setItem('theme', 'auto-theme');
      }
      
      updateIcon(body.className);
    });
    
    function updateIcon(theme) {
      if (theme === 'dark-theme') {
        icon.className = 'fas fa-sun';
      } else if (theme === 'light-theme') {
        icon.className = 'fas fa-adjust';
      } else {
        icon.className = 'fas fa-moon';
      }
    }
  
    // Set up navigation between steps
    document.getElementById('nextToStep2').addEventListener('click', function() {
      const email = document.getElementById('email').value;
      if (!email) {
        showAlert('Please enter your email address', 'warning');
        return;
      }
      
      // Get Cloudflare token
      const cfToken = getTurnstileToken('step1');
      if (!cfToken) {
        showAlert('Please complete the anti-bot verification', 'warning');
        return;
      }
      
      // Send verification code
      $.ajax({
        type: 'POST',
        url: 'sendRecoveryCode.php',
        data: { 
          email: email,
          cf_token: cfToken
        },
        dataType: 'json',
        success: function(response) {
          if (response.success) {
            goToStep(2);
            showAlert('Verification code sent to your email', 'success');
            resetTurnstile();
          } else {
            showAlert(response.message || response.error || 'Error sending verification code', 'error');
            resetTurnstile();
          }
        },
        error: function(xhr) {
          let errorMessage = 'Error connecting to server. Please try again.';
          try {
            const response = JSON.parse(xhr.responseText);
            errorMessage = response.message || response.error || errorMessage;
          } catch(e) {}
          showAlert(errorMessage, 'error');
          resetTurnstile();
        }
      });
    });
    
    document.getElementById('backToStep1').addEventListener('click', function() {
      goToStep(1);
    });
    
    document.getElementById('resetPassword').addEventListener('click', function() {
      const newPassword = document.getElementById('newPassword').value;
      const confirmPassword = document.getElementById('confirmPassword').value;
      
      if (!newPassword) {
        showAlert('Please enter your new password', 'warning');
        return;
      }
      
      if (newPassword !== confirmPassword) {
        showAlert('Passwords do not match', 'warning');
        return;
      }
      
      const digit1 = document.getElementById('digit1').value;
      const digit2 = document.getElementById('digit2').value;
      const digit3 = document.getElementById('digit3').value;
      const digit4 = document.getElementById('digit4').value;
      const digit5 = document.getElementById('digit5').value;
      const digit6 = document.getElementById('digit6').value;
      const code = digit1 + digit2 + digit3 + digit4 + digit5 + digit6;
      
      if (code.length !== 6) {
        showAlert('Please enter all six digits of the verification code', 'warning');
        return;
      }
      
      const email = document.getElementById('email').value;
      
      // Get Cloudflare token
      const cfToken = getTurnstileToken('step2');
      if (!cfToken) {
        showAlert('Please complete the anti-bot verification', 'warning');
        return;
      }
      
      $.ajax({
        type: 'POST',
        url: 'recovery.php',
        data: { 
          email: email, 
          verificationCode: code, 
          newPassword: newPassword,
          cf_token: cfToken
        },
        dataType: 'json',
        success: function(response) {
          if (response.success) {
            showAlert('Password reset successful! You can now log in with your new password', 'success');
            setTimeout(function() {
              window.location.href = 'index.html';
            }, 2000);
          } else {
            showAlert(response.message || response.error || 'Password reset failed', 'error');
            resetTurnstile();
          }
        },
        error: function(xhr) {
          let errorMessage = 'Error connecting to server. Please try again.';
          try {
            const response = JSON.parse(xhr.responseText);
            errorMessage = response.message || response.error || errorMessage;
          } catch(e) {}
          showAlert(errorMessage, 'error');
          resetTurnstile();
        }
      });
    });
    
    // Auto focus next input in verification code
    const digitInputs = document.querySelectorAll('.digit');
    digitInputs.forEach(function(input, index) {
      // Only allow numeric input
      input.addEventListener('input', function(e) {
        // Replace non-numeric characters with empty string
        this.value = this.value.replace(/[^0-9]/g, '');
        
        // Auto-advance to next field
        if (this.value.length === this.maxLength && index < digitInputs.length - 1) {
          digitInputs[index + 1].focus();
        }
      });
      
      input.addEventListener('keydown', function(e) {
        // Handle backspace to go to previous field
        if (e.key === 'Backspace' && !this.value && index > 0) {
          digitInputs[index - 1].focus();
        }
        
        // Handle left/right arrow keys for navigation
        if (e.key === 'ArrowLeft' && index > 0) {
          e.preventDefault();
          digitInputs[index - 1].focus();
        }
        
        if (e.key === 'ArrowRight' && index < digitInputs.length - 1) {
          e.preventDefault();
          digitInputs[index + 1].focus();
        }
      });
      
      // Select all text on focus
      input.addEventListener('focus', function() {
        this.select();
      });
    });
    
    function goToStep(step) {
      // Update step indicators
      document.querySelectorAll('.step').forEach(function(stepEl, index) {
        if (index + 1 < step) {
          stepEl.classList.add('active');
          stepEl.classList.add('completed');
        } else if (index + 1 === step) {
          stepEl.classList.add('active');
          stepEl.classList.remove('completed');
        } else {
          stepEl.classList.remove('active');
          stepEl.classList.remove('completed');
        }
      });
      
      // Show the correct step content
      document.querySelectorAll('.form-step').forEach(function(content, index) {
        if (index + 1 === step) {
          content.classList.add('active');
        } else {
          content.classList.remove('active');
        }
      });
      
      // Render Turnstile for the current step
      setTimeout(function() {
        renderTurnstile(step);
      }, 300);
    }
    
    // Initialize Turnstile for the first step when the page loads
    setTimeout(function() {
      renderTurnstile(1);
    }, 1000);
  });
</script>
</body>
</html>
